<template>
	<view class="tar">
		<ant-tabs type="primary" :items="items" :current="current" onChange="onChange" />

		<swiper :current="current" :autoplay="false" :vertical="false" :circular="false" onChange="onSwipeChange">
			<block v-for="(item, index) in items" :key="index">
				<swiper-item>
					<view class="containercontent">
						<container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
							<view>
								<view class="container">
									<image class="left" mode="scaleToFill" :src="item.image" />
									<view class="content">
										<view class="title1">
											{{ item.name }}
										</view>
										<view class="title2">
											{{ item.interpretation }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.dingdannumber }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.address }}
											<view class="title2right">￥{{ item.price }}</view>
										</view>
									</view>
								</view>
							</view>

							<view slot="headerRight" style="color: #f48315">
								{{ item.state }}
							</view>
						</container>
					</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				current: 0,
				items: [{
					title: '全部'
				}, {
					title: '待支付'
				}, {
					title: '待确认'
				}, {
					title: '带出行'
				}, {
					title: '售后'
				}],
				address: "",
				createTime: "",
				note: "",
				openID: "",
				orderID: "",
				paymentStatus: "",
				// payname: "",
				shopID: 0,
				totalAmout: 0,
				dingdan: [],
				dingdan: [{
					number: '订单编号  y123412341',
					name: '厦门园林植物园',
					interpretation: '游客通用票',
					dingdannumber: '0234-2343 2134.2134.23',
					image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.OErrMVtpfkTfUEGoGJxBggHaEp?rs=1&pid=ImgDetMain',
					adress: ' 思明区湖苑里24号',
					price: '100',
					state: '待确认'
				}]
			};
		},
		onLoad() {
			uni.request({
				url: url + '/selectAllOrder',
				method: 'POST',
				data: {
					from: '支付宝',
					production: 'AlipayJSAPI'
				},
				headers: {
					'content-type': 'application/json' //默认值
				},
				dataType: 'json',
				success: function(res) {
					if (res.data.data) {
						this.setData({
							dingdan: res.data.data
						});
					}
				},
				fail: function(error) {
					console.error('fail: ', JSON.stringify(error));
				},
				complete: function(res) {
					uni.hideLoading();
				}
			});
		},
		methods: {
			onSwipeChange(e) {
				this.setData({
					current: e.detail.current
				});
			},

			onChange(current) {
				this.setData({
					current
				});
			},

			handleChange(current) {
				this.setData({
					current
				});
			},

			onPlus() {
				this.alert('plus');
			},

			alert(content) {
				uni.alert({
					title: content
				});
			}
		}
	};
</script>
<style>
	.list {
		display: flex;
		flex-direction: column;
	}

	page {
		background-color: #f7f7f7;
	}

	.left {
		padding: 8px;
		width: 80px;
		height: 80px;
		border-radius: 10px;
	}

	.containercontent {
		margin: 15px 15px 0 15px;
	}

	.container {
		display: flex;
		color: #333333;
		border-radius: 10px;
	}

	.content {
		margin-left: 10px;
		line-height: 1.6;
		width: 70%;
	}

	.title1 {
		font-size: 18px;
	}

	.title2 {
		font-size: 14px;
		color: gray;
	}

	.title2right {
		float: right;
		color: red;
		font-size: 16px;
	}

	.tar {
		width: 100%;
		padding-bottom: 15px;
	}
</style>